$(function () {
    load()
    cj()
    gzb()

    $(document).on('keydown', function (e) {
        if (e.keyCode == 13) {
            var local = getDate();
            if ($('#name').val() == '' || $('#score').val() == '' || $('#money').val() == '') {
                return
            } else {
                local.push({
                    title: $('#name').val(),
                    tit: $('#score').val(),
                    ti: $('#money').val(),
                })
                saveDate(local)
                load()
                cj()
                gzb()
                $('#name').val('')
                $('#score').val('')
                $('#money').val('')
            }

        }
    })

    $('#add').on('click', function () {
        var local = getDate();
        if ($('#name').val() == '' || $('#score').val() == '' || $('#money').val() == '') {
            return
        } else {
            local.push({
                title: $('#name').val(),
                tit: $('#score').val(),
                ti: $('#money').val(),
            })
            saveDate(local)
            load()
            cj()
            gzb()
            $('#name').val('')
            $('#score').val('')
            $('#money').val('')
        }
    })





    function cj() {
        var date = getDate()
        var name = []
        var xz = []
        for (var i = 0; i < date.length; i++) {
            name.unshift(date[i].title)
            xz.unshift(date[i].ti)
        }


        var chartDom = document.getElementById('up');
        var myChart = echarts.init(up);
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: name
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: xz,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }]
        };
        myChart.setOption(option);

        // 当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function () {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    }
    //读取
    function getDate() {
        var data = localStorage.getItem('list');
        if (data !== null) {
            //本地存的数据都是字符串格式所以需要转换
            return JSON.parse(data); //转换成对象
        } else {
            return [];
        }
        //保存
    }

    function saveDate(data) {
        localStorage.setItem('list', JSON.stringify(data));
    }

    function load() {
        var data = getDate();
        $('.listBox').empty();
        $.each(data, function (i, n) {
            $('.listBox').prepend('<div class="one editMode"><span class="item">' + n.title + '</span><span class="item">' + n.tit + '</span><span class="item">' + n.ti + '</span> <span class="item"><i class="no" id=' + i + '></i></span></div>')
        })
    }
    $('.listBox').on('click', 'i', function () {
        // alert(11)
        //7 先获取本地存储
        var data = getDate();
        //再修改数据。
        var index = $(this).attr('id')
        //利用splice选择从什么位置开始删除。删几个
        data.splice(index, 1);
        //将删除过后的数据保存到本地存储
        saveDate(data);
        //渲染页面
        load();
        cj()
        gzb()
    })

    function gzb() {
        var date = getDate()
        var name = []
        var xz = []
        for (var i = 0; i < date.length; i++) {
            name.unshift(date[i].title)
            xz.unshift(date[i].ti)
        }
        var chartDom = document.getElementById('down');
        var myChart = echarts.init(down);
        var option;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: name
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: xz,
                type: 'line',
                areaStyle: {}
            }]
        };

        option && myChart.setOption(option);
        // 当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function () {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    }
});